import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from './Component'
import { connect } from 'react-redux'
import { Select, Spin, Empty, message } from 'antd'
import PropTypes from 'prop-types'
import style from './SecretarySelect.module.less'
const { Option } = Select
class SecretarySelect extends Component {
  state = {
    options: [],
    loading: false
  }

  // 获取选项
  getOptions () {
    this.setState({ loading: true })
    const { type, onjob } = this.props
    this.$get('/api/xapc/case/caseprocesser', {
      type,
      onjob
    })
      .then(res => {
        this.setState({ loading: false })
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        this.setState({
          options: res.data
        })
      })
      .catch(() => this.setState({ loading: false }))
  }

  componentDidMount () {
    this.timer = setTimeout(() => {
      this.getOptions()
    }, 200)
  }

  componentWillUnmount () {
    this.timer && clearTimeout(this.timer)
  }

  // 渲染选项
  renderOptions () {
    return this.state.options.map((li, i) => {
      return <Option key={`${li.employeeid}_${i}`} value={li.employeeid}>{li.employee}</Option>
    })
  }

  // 渲染空的情况
  renderEmpty () {
    if (this.state.loading) {
      return (
        <div className={style.empty}><Spin /></div>
      )
    }
    return <div className={style.empty}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
  }

  render () {
    return (
      <div className={style.container}>
        <Select defaultActiveFirstOption={false} filterOption={false} value={this.props.value} onChange={(...arg) => this.props.onChange(...arg)} placeholder='请选择秘书' allowClear notFoundContent={this.renderEmpty()}>
          {this.renderOptions()}
        </Select>
      </div>
    )
  }
}

SecretarySelect.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  type: PropTypes.string,
  onjob: PropTypes.number
}

SecretarySelect.defaultProps = {
  value: undefined,
  onChange: () => {},
  type: 'processer',
  onjob: undefined
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SecretarySelect)
